<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>市场数据分析</title>
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <link rel="stylesheet" type="text/css" href="view/iwocar5/css/main.css" />
	<script src="view/iwocar5/js/jquery-1.11.1.min.js"></script>
</head>
<body>
<!--    <div class="header">
        <h5>数据排行榜<i class="arrow_l1"></i><em class="arrow_l2"></em></h5>
    </div>-->

    <div class="form-bar">
        <h3 class="pub-title">
            <span>人流量分布</span>
            <div>
                <span><i class="arrow_b"></i></span>
                <select id="flowtimeform">
                  <option selected = "selected">当前</option>
				  <option>昨天</option>
                  <option>上周</option>
				  <option>上月</option>
				  <option>今年</option>
                </select>
            </div>
        </h3>
        <div class="form-border">
            <div class="focusClient-form" id="focusClient1-form"></div>
			<div class="focusClient-form" id="focusClient2-form"></div>
        </div>
    </div>  
    <!--<div class="form-bar">
        <h3 class="pub-title">
            <span>二次销售排行榜</span>
        </h3>
        <div class="form-border">
            
        </div>
    </div> -->
    <div class="form-bar">
        <h3 class="pub-title">
            <span>集客比</span>
			<div>
				<span><i class="arrow_b"></i></span>
                <select id="jikehistory">
                  <option selected = "selected">今天</option>
                  <option>本周</option>
				  <option>本月</option>
				  <option>今年</option>
                </select>
			</div>
        </h3>
        <div class="form-border">
            <div class="focusClient-form" id="focusClient3-form"></div>
        </div>
    </div> 
    <div class="form-bar">
        <h3 class="pub-title">
            <span>同区集客对比</span>
            <div>
                <span><i class="arrow_b"></i></span>
                <select id='tongqujike'>
                  <option selected = "selected">今天</option>
                  <option>本周</option>
                  <option>本月</option>
                  <option>今年</option>
                </select>
            </div>
        </h3>
        <div class="form-border">
            <div class="focusClient-form" id="focusClient4-form"></div>
        </div>
    </div>      
    <div class="form-bar">
        <h3 class="pub-title">
            <span>全国集客对比</span>
            <div>
                <span><i class="arrow_b"></i></span>
                <select id='quanguojike'>
                  <option selected = "selected">今天</option>
                  <option>本周</option>
                  <option>本月</option>
                  <option>今年</option>
                </select>
            </div>
        </h3>
        <div class="form-border">
            <div class="focusClient-form" id="focusClient5-form"></div>
        </div>
    </div>
    <!--<div class="form-bar">
        <h3 class="pub-title">
            <span>销量排行榜</span>
        </h3>
        <div class="form-border">
            <div class="focusClient-form" id="focusClient4-form"></div>
        </div>
    </div> -->
    <!--<div class="form-bar">
        <h3 class="pub-title">
            <span>无效用户排行榜</span>
        </h3>
        <div class="form-border">
            <div class="focusClient-form" id="focusClient5-form"></div>
        </div>
    </div> -->
    <!--<div class="form-bar">
        <h3 class="pub-title">
            <span>成交车型排行榜</span>
        </h3>
        <div class="form-border">
            <div class="focusClient-form" id="focusClient6-form"></div>
        </div>
    </div> -->


<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('focusClient1-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['9:00','10:00','11:00','12:00','13:00'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '50%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[
                                '<?php echo $p9?>',
                                '<?php echo $p10?>',
                                '<?php echo $p11?>',
                                '<?php echo $p12?>',
                                '<?php echo $p13?>',
                                ]
                        }
                    ],
                    grid : {
                        x : '15%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
        		$("#flowtimeform").change(function(){
                        var flow_time=$("#flowtimeform").children('option:selected').val();
                        if(flow_time=="当前"){
                            $('#focusClient2-form').css({'display':'block'});
                            option.xAxis[0].data=['9:00','10:00','11:00','12:00','13:00'];
                            option.series[0].data =['<?php echo $p9?>',
                                '<?php echo $p10?>',
                                '<?php echo $p11?>',
                                '<?php echo $p12?>',
                                '<?php echo $p13?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="昨天"){
                            $('#focusClient2-form').css({'display':'block'});
                            option.xAxis[0].data=['9:00','10:00','11:00','12:00','13:00',];
                            option.series[0].data =[
                                '<?php echo $b9?>',
                                '<?php echo $b10?>',
                                '<?php echo $b11?>',
                                '<?php echo $b12?>',
                                '<?php echo $b13?>',
                                ];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="上周"){
                            $('#focusClient2-form').css({'display':'none'});
                            option.xAxis[0].data=['周一','周二','周三','周四','周五','周六','周日',];
                            option.series[0].data =[
                            '<?php echo $onep?>',
                            '<?php echo $twop?>',
                            '<?php echo $threep?>',
                            '<?php echo $fourp?>',
                            '<?php echo $fivep?>',
                            '<?php echo $sixp?>',
                            '<?php echo $sevenp?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="上月"){
                            $('#focusClient2-form').css({'display':'none'});
                            option.xAxis[0].data=['第一周','第二周','第三周','第四周',];
                            option.series[0].data =[
                            '<?php echo $firstp?>',
                            '<?php echo $secondp?>',
                            '<?php echo $thirdp?>',
                            '<?php echo $fourthp?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="今年"){
                            $('#focusClient2-form').css({'display':'none'});
                            option.xAxis[0].data=['第1季度','第2季度','第3季度','第4季度',];
                            option.series[0].data =[
                            '<?php echo $firstmonth?>',
                            '<?php echo $secondmonth?>',
                            '<?php echo $thirdmonth?>',
                            '<?php echo $fourthmonth?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }


                })        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('focusClient2-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['14:00','15:00','16:00','17:00','18:00'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '50%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:['<?php echo $p14?>',
                                '<?php echo $p15?>',
                                '<?php echo $p16?>',
                                '<?php echo $p17?>',
                                '<?php echo $p18?>',]
                        }
                    ],
                    grid : {
                        x : '15%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
        		
				$("#flowtimeform").change(function(){
                        var flow_time=$("#flowtimeform").children('option:selected').val();
                        if(flow_time=="当前"){
                            option.xAxis[0].data=['14:00','15:00','16:00','17:00','18:00'];
                            option.series[0].data =['<?php echo $p14?>',
                                '<?php echo $p15?>',
                                '<?php echo $p16?>',
                                '<?php echo $p17?>',
                                '<?php echo $p18?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="昨天"){
                            option.xAxis[0].data=['14:00','15:00','16:00','17:00','18:00',];
                            option.series[0].data =[
                                '<?php echo $b14?>',
                                '<?php echo $b15?>',
                                '<?php echo $b16?>',
                                '<?php echo $b17?>',
                                '<?php echo $b18?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="上周"){
                            option.xAxis[0].data=['周一','周二','周三','周四','周五','周六','周日',];
                            option.series[0].data =[
                            '<?php echo $onep?>',
                            '<?php echo $twop?>',
                            '<?php echo $threep?>',
                            '<?php echo $fourp?>',
                            '<?php echo $fivep?>',
                            '<?php echo $sixp?>',
                            '<?php echo $sevenp?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);                          
                        }
                        if(flow_time=="上月"){
                            option.xAxis[0].data=['第一周','第二周','第三周','第四周',];
                            option.series[0].data =[
                            '<?php echo $firstp?>',
                            '<?php echo $secondp?>',
                            '<?php echo $thirdp?>',
                            '<?php echo $fourthp?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="年"){
                            option.xAxis[0].data=['第1季度','第2季度','第3季度','第4季度',];
                            option.series[0].data =[
                            '<?php echo $firstmonth?>',
                            '<?php echo $secondmonth?>',
                            '<?php echo $thirdmonth?>',
                            '<?php echo $fourthmonth?>',];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                })      
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('focusClient3-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['今天','昨天'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '80%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[<?php echo $nowjk?>,<?php echo $yesdjk?>]
                        }
                    ],
                    grid : {
                        x : '15%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
        		
				 $("#jikehistory").change(function(){
                        var flow_time=$("#jikehistory").children('option:selected').val();
                        var netid=3;
                        if(flow_time=="今天"){
                            option.xAxis[0].data = ['今天','昨天'];
                            option.series[0].data = [<?php echo $nowjk?>,<?php echo $yesdjk?>];
                            //console.log(sx);
                            option.series[0].barCategoryGap='80%';
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                            }
                        if(flow_time=="本周"){
                            option.xAxis[0].data = ['一','二','三','四','五','六','日'];
                            option.series[0].data = [
                            
                            <?php echo $onejk?>,
                            <?php echo $twojk?>,
                            <?php echo $threejk?>,
                            <?php echo $fourjk?>,
                            <?php echo $fivejk?>,
                            <?php echo $sixjk?>,
                            <?php echo $sevenjk?>,
                            ];
                            option.series[0].barCategoryGap='50%';
                            //console.log(sx);
                            //console.log(sy);
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="本月"){
                            option.xAxis[0].data = ['第1周','第2周','第3周','第4周',];
                            option.series[0].data = [
                            <?php echo $firstjk?>,
                            <?php echo $secondjk?>,
                            <?php echo $thirdjk?>,
                            <?php echo $fourthjk?>,];
                            option.series[0].barCategoryGap='60%';
                            //console.log(sx);
                            //console.log(sy);
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="今年"){
                            option.xAxis[0].data = ['第一季度','第二季度','第三季度','第四季度',];
                            option.series[0].data = [
                            <?php echo $firstmonth?>,
                            <?php echo $secondmonth?>,
                            <?php echo $thirdmonth?>,
                            <?php echo $fourthmonth?>,];
                            option.series[0].barCategoryGap='60%';
                            //console.log(sx);
                            //console.log(sy);
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }


                })
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('focusClient4-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['本店','平均值'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            scale : true,
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '80%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[<?php echo $allday;?>,<?php echo $avgallday;?>]
                        }
                    ],
                    grid : {
                        x : '20%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
                
                $("#tongqujike").change(function(){
                        var flow_time=$("#tongqujike").children('option:selected').val();
                        if(flow_time=="今天"){
                            option.yAxis[0].data=['本店','平均值'];
                            option.series[0].data =[<?php echo $allday;?>,<?php echo $avgallday;?>];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="本周"){
                            option.yAxis[0].data=['本店','平均值'];
                            option.series[0].data =[<?php echo $week?>,<?php echo $avgweek?>];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="本月"){
                            option.yAxis[0].data=['本店','平均值'];
                            option.series[0].data =[<?php echo $month ?>,<?php echo $avgmonth?>];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="今年"){
                            option.yAxis[0].data=['本店','平均值'];
                            option.series[0].data =[<?php echo $years?>,<?php echo $avgyears?>];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }                       
                })
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
// 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('focusClient5-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['本店','平均值'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            //scale : true,
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '80%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[<?php echo $allday;?>,<?php echo $daycountry?>]
                        }
                    ],
                    grid : {
                        x : '20%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
                
                $("#quanguojike").change(function(){
                        var flow_time=$("#quanguojike").children('option:selected').val();
                        if(flow_time=="今天"){
                            option.yAxis[0].data=['本店','平均值'];
                            option.series[0].data =[<?php echo $allday;?>,<?php echo $daycountry?>];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="本周"){
                            option.yAxis[0].data=['本店','平均值'];
                            option.series[0].data =[<?php echo $week?>,<?php echo $weekcountry?>];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="本月"){
                            option.yAxis[0].data=['本店','平均值'];
                            option.series[0].data =[<?php echo $month ?>,<?php echo $monthcountry?>];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                        if(flow_time=="今年"){
                            option.yAxis[0].data=['本店','平均值'];
                            option.series[0].data =[<?php echo $years?>,<?php echo $yearcountry?>];
                            myChart.clear();
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }                           
                })
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );
        // 使用
      /*  require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('focusClient4-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['张三','李勇','张小凡','张伟','陆雪琪','杨明'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '50%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[29,26,25,24,20,18]
                        }
                    ],
                    grid : {
                        x : '15%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );*/
        
        // 使用
     /*   require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('focusClient5-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['张三','李勇','张小凡','张伟','陆雪琪','杨明'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '50%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[29,26,25,24,20,18]
                        }
                    ],
                    grid : {
                        x : '15%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );*/
        
        // 使用
     /*   require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('focusClient6-form')); 
                
                var option = {
                    calculable : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['张三','李勇','张小凡','张伟','陆雪琪','杨明'],
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                            splitLine : {
                                show : false,
                            },
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLine: {lineStyle: {color: '#EEEEEE'}},
                        }
                    ],
                    series : [
                        {
                            // name:'蒸发量',
                            type:'bar',
                            barCategoryGap : '50%',
                            itemStyle: {
                                normal: {
                                    color: '#434c53',
                                    label : {
                                        show: true, position: 'top',
                                        textStyle:{
                                            color : '#000',
                                        }
                                    }
                                }
                            },
                            data:[29,26,25,24,20,18]
                        }
                    ],
                    grid : {
                        x : '15%',
                        y : '15%',
                        x2 : '10%',
                        y2 : '20%'
                    }
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                window.onresize = myChart.resize;
            }
        );*/
</script>
</body>
</html>